<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>{{ 'Unassigned Disks' | translate }}</h3>
  </mat-card-header>
  @if (!(isLoading$| async)) {
    <mat-card-content>
      @if (hasDisks$ | async) {
        @for (item of sizeDisksMap[DiskType.Hdd] | keyvalue: orderBySize; track item.key) {
          <div>
            @if (item.value) {
              <div class="details-item">
                <ix-icon name="ix-hdd"></ix-icon>
                <div class="label">{{ getFilesize(item.key) }} </div>
                <div class="value"> × {{ item.value.length }}</div>
              </div>
            }
          </div>
        }
        @for (item of sizeDisksMap[DiskType.Ssd] | keyvalue: orderBySize; track item.key) {
          <div>
            @if (item.value) {
              <div class="details-item">
                <ix-icon name="ix-ssd"></ix-icon>
                <div class="label">{{ getFilesize(item.key) }} </div>
                <div class="value"> × {{ item.value.length }}</div>
              </div>
            }
          </div>
        }
      } @else {
        {{ 'No disks available.' | translate }}
      }
    </mat-card-content>
  } @else {
    <div class="loading">{{ 'Loading disks...' | translate }}</div>
  }
</mat-card>

<ng-template #loading>
  <div class="loading">{{ 'Loading disks...' | translate }}</div>
</ng-template>
